<template>
  <div class>
    <el-card class="btns">
      <el-button size="medium" type="primary" @click="addItem">增加</el-button>
      <el-button size="medium" @click="editItem">修改</el-button>
      <el-button size="medium" type="danger" @click="deleteItem">删除</el-button>
    </el-card>
    <el-card>
      <el-tree
        highlight-current
        @node-click="handleNodeClick"
        :props="props"
        :data="data"
        node-key="id"
      ></el-tree>
    </el-card>
    <el-dialog title="操作管理" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <el-form-item label="菜单名称" prop="functionName">
          <el-input v-model="form.functionName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单url" prop="functionUrl">
          <el-input v-model="form.functionUrl" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单序号">
          <el-input v-model="form.functionOrderNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.functionIntroduce" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="节点位置" v-show="isAdd">
          <el-radio-group v-model="form.nodeType">
            <el-radio label="1">兄弟节点</el-radio>
            <el-radio label="2">子节点</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle()">取 消</el-button>
        <el-button type="primary" @click="ok">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getMenuList } from "@/functions/menuList";
import { addItem, deleteItem, editItem } from "./function";
export default {
  components: {},
  data() {
    return {
      isAdd: false,
      dialogFormVisible: false,
      form: {
        parentId: "",
        functionName: "",
        functionUrl: "",
        functionIntroduce: "",
        functionOrderNum: "",
        menuFlag: "1", //固定参数
        title: "",
        nodeKey: ""
      },
      rules: {
        functionName: [
          { required: true, message: "菜单名称不能为空！", trigger: "blur" }
        ],
        functionUrl: [
          {
            required: true,
            message: "菜单url不能为空！",
            trigger: "blur"
          }
        ]
      },
      data: [],
      props: {
        label: "functionName",
        children: "children"
      },
      chackedNode: {}
    };
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    cancle(){
      this.dialogFormVisible = false;
      this.resetForm("form")
    },
    init() {
      getMenuList().then(res => {
        console.log(res);
        if (res.retHead.code == "0000000") {
          this.data = res.retBody;
        }
      });
      this.chackedNode = {};
    },
    handleNodeClick(v) {
      console.log(v);
      this.chackedNode = v;
    },
    rule1() {
      if (this.chackedNode.functionName == undefined) {
        this.$message.error("请先选取一个节点！");
        return false;
      } else {
        return true;
      }
    },
    ok() {
      if (this.isAdd) {
        this.handleAdd();
      } else {
        this.handleEdit();
      }
    },
    handleAdd() {
      if (this.form.nodeType == 1) {
        this.form.parentId = this.chackedNode.parentId;
      } else {
        this.form.parentId = this.chackedNode.id;
      }
      this.form.menuFlag = "1";
      this.$refs.form.validate(valid => {
        if (valid) {
          addItem(this.form).then(res => {
            this.dialogFormVisible = false;
            if (res.retHead.code == "0000000") {
              this.$message.success("操作成功！");
              this.init();
            } else {
              this.$message.error("添加失败："+res.retHead.message);
            }
          });
        }
      });
    },
    handleEdit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          editItem(this.form).then(res => {
            this.dialogFormVisible = false;
            if (res.retHead.code == "0000000") {
              this.$message.success("操作成功！");
            } else {
              this.$message.error("操作失败！");
            }
          });
        }
      });
    },
    deleteItem() {
      if (this.rule1()) {
        let params = {
          id: this.chackedNode.id
        };
        deleteItem(params).then(res => {
          if (res.retHead.code == "0000000") {
            this.$message.success("操作成功！");
            this.init();
          } else {
            this.$message.error("操作失败！");
          }
        });
      }
    },
    addItem() {
      if (this.rule1()) {
        this.isAdd = true;
        this.dialogFormVisible = true;
        this.form = {};
      }
    },
    editItem() {
      if (this.rule1()) {
        this.isAdd = false;
        this.dialogFormVisible = true;
        this.form = this.chackedNode;
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  created() {}
  
};
</script>
<style lang='scss' scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>